<!-- 
      $listeners: 包含父作用域中通过v-on传递进来的所有事件监听器（不含.native修饰的）



 -->


<template>
  <div>
    <childcom :name="name" :age="age" :sex="sex" @testChangeName="changeName"></childcom>
  </div>
</template>
<script>
  export default {
    'name': 'test',
    props: [],
    data() {
      return {
        'name': '张三',
        'age': '30',
        'sex': '男'
      }
    },
    components: {
      'childcom': {
        props: ['name'],
        template: `<div>
              <div>我是子组件   {{name}}</div>
              <grandcom v-bind="$attrs" v-on="$listeners"></grandcom>
          </div>`,

        components: {
          'grandcom': {
            template: `<div>我是孙子组件-------<button @click="grandChangeName">改变名字</button></div>`,
            methods: {
              grandChangeName() {
                // 触发父组件的父组件的监听器
                this.$emit('testChangeName', 'kkkkkk')
              }
            }
          }
        }
      }
    },
    methods: {
      changeName(val) {
        this.name = val
      }
    }
  }
</script>